<!-- 会议排座显示 -->
<template>
  <div id="index" ref="appRef">
    <dv-charts :option="option" />
    <a-row>
      <a-col :span="7">
        <!-- 会议室预定--表格 -->
        <div id="form2" class="l-p-30">
          <dv-border-box-8 :dur="10">
            <div class="l-col-fff l-p-30">
              <div class="title l-flex l-row-between ">
                <div style="height: 36px;" class="l-relative l-w-100 l-flex-1 l-m-b-20">
                  <div class="l-absolute l-h-100">
                    <img class="l-h-100" src="@/static/img/title-bg.png" alt="" srcset="">
                  </div>
                  <div style="margin-left: 4rem;" class="l-relative l-h-100 l-zIndex-1 l-flex l-col-center l-title-col">
                    座位分布统计
                  </div>
                </div>
              </div>
              <dv-scroll-board :config="infoConfig" style="width:100%;height:280px" />
            </div>
          </dv-border-box-8>
        </div>
        <!-- 会议室预定--表格 -->
        <div id="form2" class="l-p-30">
          <dv-border-box-8 :dur="10">
            <div class="l-col-fff l-p-30">
              <div class="title l-flex l-row-between l-p-b-20">
                <div style="height: 36px;" class="l-relative l-w-100 l-flex-1 l-m-b-20">
                  <div class="l-absolute l-h-100">
                    <img class="l-h-100" src="@/static/img/title-bg.png" alt="" srcset="">
                  </div>
                  <div style="margin-left: 4rem;" class="l-relative l-h-100 l-zIndex-1 l-flex l-col-center l-title-col">
                    上座率统计
                  </div>
                </div>
              </div>
              <dv-scroll-board :config="infoConfig" style="width:100%;height:280px" />
            </div>
          </dv-border-box-8>
        </div>
        <!-- 会议室预定--表格 -->
        <div id="form2" class="l-p-30">
          <dv-border-box-8 :dur="10">
            <div class="l-col-fff l-p-30">
              <div class="title l-flex l-row-between l-p-b-20">
                <div style="height: 36px;" class="l-relative l-w-100 l-flex-1 l-m-b-20">
                  <div class="l-absolute l-h-100">
                    <img class="l-h-100" src="@/static/img/title-bg.png" alt="" srcset="">
                  </div>
                  <div style="margin-left: 4rem;" class="l-relative l-h-100 l-zIndex-1 l-flex l-col-center l-title-col">
                    实景图
                  </div>
                </div>
              </div>
              <dv-scroll-board :config="infoConfig" style="width:100%;height:280px" />
            </div>
          </dv-border-box-8>
        </div>
      </a-col>
      <a-col :span="17">
        <!-- 会议室预定--表格 -->
        <div id="form2" class="l-p-30">
          <dv-border-box-8 :dur="10">
            <div class="l-col-fff l-p-30">
              <div class="title l-flex l-row-between l-p-b-20">
                <div class="l-relative l-w-100 l-flex-1">
                  <div style="height: 36px;" class="l-absolute">
                    <img class="l-h-100" src="@/static/img/title-bg.png" alt="" srcset="">
                  </div>
                  <div style="margin-left: 4rem;" class="l-relative l-h-100 l-zIndex-1 l-flex l-col-center l-title-col">
                    会议信息 Meeting Information
                  </div>
                </div>
                <div class="l-flex l-col-center">
                  <a-space>
                    <a-select ref="select" v-model:value="value1" style="width: 120px" @focus="focus"
                      @change="handleChange">
                      <a-select-option value="jack">Jack</a-select-option>
                      <a-select-option value="lucy">Lucy</a-select-option>
                      <a-select-option value="disabled" disabled>Disabled</a-select-option>
                      <a-select-option value="Yiminghe">yiminghe</a-select-option>
                    </a-select>
                    <a-input class="l-input-border l-col-fff" v-model:value="value" :bordered="false" placeholder="请输入" />
                    <a-button>搜索</a-button>
                  </a-space>
                </div>
              </div>
              <dv-scroll-board :config="infoConfig" style="width:100%;height:280px" />
            </div>
          </dv-border-box-8>
        </div>
      </a-col>
    </a-row>
  </div>
</template>

<script lang="ts" setup>
import {
  ref, onMounted, onUnmounted
} from 'vue'
import useDraw from '@/utils/useDraw'
const option = ref({
  series: [
    {
      type: 'gauge',
      startAngle: -Math.PI / 2,
      endAngle: Math.PI,
      arcLineWidth: 25,
      data: [
        { name: 'itemA', value: 65, gradient: ['#03c2fd', '#1ed3e5', '#2fded6'] }
      ],
      center: ['50%', '55%'],
      axisLabel: {
        show: false
      },
      axisTick: {
        show: false
      },
      pointer: {
        show: false
      },
      dataItemStyle: {
        lineCap: 'round'
      },
      details: {
        show: true,
        formatter: '{value}%',
        style: {
          fill: '#1ed3e5',
          fontSize: 35
        }
      }
    }
  ]
})
const infoConfig = ref({
  header: ['项目名称', '详细内容', '责任人', '时间节点'],
  headerHeight: 40,
  waitTime: "5000",
  evenRowBGC: 'rgb(44 106 243 / 70%)',
  oddRowBGC: 'rgb(44 106 243 / 50%)',
  data: [
    ['会议名称1', '互联网生态下的智能科技产物', '行1列3', '2023年10月07日'],
    ['会议名称2', '言必信，行必果。', '行2列3', '2023年10月10日'],
    ['会议名称3', '敏而好学，不耻下问。', '行3列3', '2023年10月11日'],
    ['会议名称4', '志当存高远。', '行4列3', '2023年10月10日'],
    ['会议名称5', '知者乐水，仁者乐山。', '行5列3', '2023年10月12日'],
    ['会议名称6', '自行束修以上，吾未尝无诲焉。', '行6列3', '2023年10月13日'],
    ['会议名称7', '知者乐水，仁者乐山。', '行7列3', '2023年10月14日'],
    ['会议名称8', '自行束修以上，吾未尝无诲焉。', '行8列3', '2023年10月16日'],
    ['会议名称9', '自行束修以上，吾未尝无诲焉。', '行9列3', '2023年10月18日'],
  ]
})

// * 适配处理
const { appRef, calcRate, windowDraw, unWindowDraw } = useDraw()
// todo 处理 loading 展示
// 生命周期
onMounted(() => {
  // handleTime()
  // todo 屏幕适应
  windowDraw()
  calcRate()
})

onUnmounted(() => {
  unWindowDraw()
  // clearInterval(timeInfo.setInterval)
})
</script>
<style lang="scss" scoped>
@import '@/assets/scss/index.scss';

.process-col {
  color: #73BAFF;
}

::v-deep .dv-scroll-board {

  .header {
    background: linear-gradient(180deg, #B8DDFF 0%, #2C6AF3 100%) !important;
  }
}
</style>
